<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-common-widget" :style="getStyle('wrap')">
      <div class="left" :style="getStyle('time')" v-if="optionsInfo.timeShown">
        <div>
          {{ showTime }}
        </div>
      </div>
      <div class="right edit" :style="getStyle('wxTip')" :key="widgetKey">
        <scrollX :speed="optionsInfo.speed" > {{ optionsInfo.wxTip }}</scrollX>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { v4 as uuid } from "uuid";
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import scrollX from "@c/public/scroll/scrollX.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import { Icon } from "vant";
import dayjs from "dayjs";

export default {
  name: "scene-nx-common-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  props: {
    widget: Object,
    field: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  components: {
    CompOperate,
    scrollX,
    Icon,
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      timeInfo: Object(),
    };
  },

  computed: {
    showTime() {
      if (this.timeInfo.time) {
        return this.timeInfo.time;
      } else {
        return dayjs().format("HH:mm");
      }
    },

    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "wrap":
            if (!!info.backgroundColor) {
              Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            } else {
              Reflect.deleteProperty(Obj, "backgroundColor");
            }
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            Reflect.set(Obj, "paddingLeft", pxToVw(info.paddingRightLeft));
            Reflect.set(Obj, "paddingRight", pxToVw(info.paddingRightLeft));

            return Obj;
          case "time":
            if (!!info.timeBackgroundColor) {
              Reflect.set(Obj, "backgroundColor", `${info.timeBackgroundColor}`);
              Reflect.set(Obj, "fontWeight", `${info.timeFontWeight}`);
            } else {
              Reflect.deleteProperty(Obj, "backgroundColor");
            }
            Reflect.set(Obj, "fontSize", pxToVw(info.timeFontSize));
            Reflect.set(Obj, "borderRadius", pxToVw(info.timeBorderRadius));
            Reflect.set(Obj, "color", `${info.timeFontColor}`);
            Reflect.set(Obj, "width", pxToVw(info.timeWidth));
            Reflect.set(Obj, "height", pxToVw(info.timeHeight));


            return Obj;
           
          case "wxTip":
            Reflect.set(Obj, "fontSize", pxToVw(info.wxTipFontSize));
            Reflect.set(Obj, "color", `${info.wxTipFontColor}`);
            Reflect.set(Obj, "fontWeight", `${info.wxTipFontWeight}`);
            return Obj;
        }
      };
    },
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop 需要在父组件created中初始化！！ */
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    handleEnd() {
      this.widgetKey = uuid();
    },

    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "headerInfo":
          this.timeInfo = data;
          break;
      }
    },
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.widgetKey = uuid();
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-common-widget{
  display: flex;
  flex-direction: row;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  .left{
    white-space: nowrap;
    border-radius: 6px;
    color: white;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    background: #ffa72c;
    margin-right: 32px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .right{
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }

}
</style>
